import 'package:flutter/material.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:travel/model/message.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/ui/scroll_refresh_config.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';

class InteractAll extends StatefulWidget {
  const InteractAll({super.key});

  @override
  State<InteractAll> createState() => _InteractAllState();
}

class _InteractAllState extends State<InteractAll> {
  RefreshController refreshController = RefreshController();

  List<MessageInteractModel> pageList = [];

  @override
  void initState() {
    pageList.add(MessageInteractModel(
        avatar:
            'https://img1.baidu.com/it/u=2179985785,1205130568&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '果汁分你一半',
        timeStr: '刚才',
        tip: '评论了你',
        info: '故宫果然十分庄严，太震撼了',
        content: '[我的评论] 北京故宫坐落在北京中轴线的中间，是世界上最大的木结构宫殿，也…'));
    pageList.add(MessageInteractModel(
        avatar:
            'https://img1.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '飞来飞去',
        timeStr: '6分钟前',
        tip: '点赞了你',
        content: '[我的评论] 金黄色的琉璃瓦下，是一排朱红的围墙，装点着它…',
        imgs: [
          'https://img2.baidu.com/it/u=1984321682,2389589006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          'https://img2.baidu.com/it/u=2749440734,3290979349&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
        ]));
    pageList.add(MessageInteractModel(
        avatar:
            'https://img0.baidu.com/it/u=3979949991,2513156939&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '王仙芝的鱼儿',
        timeStr: '6小时前',
        tip: '点赞了你',
        content: '北京十大拍照打卡地，梅思带你游个遍',
        imgs: [
          'https://img0.baidu.com/it/u=3684942262,1439353890&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          'https://img1.baidu.com/it/u=2713442194,662785862&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
        ]));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return scrollRefreshConfig(context);
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: refreshController,
      onRefresh: onRefresh,
      onLoading: onLoading,
      child: listViewBuilder(context),
    );
  }

  Future<void> onRefresh() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));
    refreshController.refreshCompleted(resetFooterState: true);
  }

  Future<void> onLoading() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));

    /// if failed, use loadFailed(), if no data return, use LoadNodata()
    if (pageList.length > 15) {
      return refreshController.loadNoData();
    }
    setState(() {
      /// 添加数据
      pageList.add(MessageInteractModel(
          avatar:
              'https://img1.baidu.com/it/u=2179985785,1205130568&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          nickname: '果汁分你一半',
          timeStr: '刚才',
          tip: '评论了你',
          info: '故宫果然十分庄严，太震撼了',
          content: '[我的评论] 北京故宫坐落在北京中轴线的中间，是世界上最大的木结构宫殿，也…'));
    });

    /// 完毕
    refreshController.loadComplete();
  }

  ListView listViewBuilder(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 10.w),
      itemBuilder: (context, index) {
        var row = pageList[index];
        return Container(
          margin: EdgeInsets.only(top: 15.h),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CircleAvatar(
                radius: 20.w,
                backgroundImage: NetworkImage(row.avatar),
              ),
              Expanded(
                  child: Container(
                padding: EdgeInsets.only(left: 15.w),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: EdgeInsets.only(bottom: 8.w),
                      child: Text(
                        row.nickname,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color0000, fontWeight: FontWeight.w700),
                      ),
                    ),
                    Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(bottom: 10.w),
                        child: Text(
                          '${row.timeStr}  ${row.tip}',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: 12.sp),
                        )),
                    if (row.info != null)
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(bottom: 15.w),
                        child: Text(
                          '${row.info}',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000, fontSize: 16.sp),
                        ),
                      ),
                    Container(
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          spacing: 8.w,
                          children: [
                            ...row.imgs.map((url) => Image.network(
                                  url,
                                  width: 45.w,
                                  height: 45.w,
                                )),
                            Text(
                              row.content,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6666, fontSize: 15.sp, lineHeight: 1.2.h),
                            )
                          ],
                        ))
                  ],
                ),
              ))
            ],
          ),
        );
      },
      itemCount: pageList.length,
    );
  }
}

class InteractComment extends StatefulWidget {
  const InteractComment({super.key});

  @override
  State<InteractComment> createState() => _InteractCommentState();
}

class _InteractCommentState extends State<InteractComment> {
  RefreshController refreshController = RefreshController();

  List<MessageInteractModel> pageList = [];

  @override
  void initState() {
    pageList.add(MessageInteractModel(
        avatar:
            'https://img1.baidu.com/it/u=2179985785,1205130568&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '果汁分你一半',
        timeStr: '刚才',
        tip: '评论了你',
        info: '故宫果然十分庄严，太震撼了',
        content: '[我的评论] 北京故宫坐落在北京中轴线的中间，是世界上最大的木结构宫殿，也…'));
    pageList.add(MessageInteractModel(
        avatar:
            'https://img1.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '飞来飞去',
        timeStr: '6分钟前',
        tip: '点赞了你',
        content: '[我的评论] 金黄色的琉璃瓦下，是一排朱红的围墙，装点着它…',
        imgs: [
          'https://img2.baidu.com/it/u=1984321682,2389589006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          'https://img2.baidu.com/it/u=2749440734,3290979349&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
        ]));
    pageList.add(MessageInteractModel(
        avatar:
            'https://img0.baidu.com/it/u=3979949991,2513156939&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '王仙芝的鱼儿',
        timeStr: '6小时前',
        tip: '点赞了你',
        content: '北京十大拍照打卡地，梅思带你游个遍',
        imgs: [
          'https://img0.baidu.com/it/u=3684942262,1439353890&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          'https://img1.baidu.com/it/u=2713442194,662785862&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
        ]));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return scrollRefreshConfig(context);
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: refreshController,
      onRefresh: onRefresh,
      onLoading: onLoading,
      child: listViewBuilder(context),
    );
  }

  Future<void> onRefresh() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));
    refreshController.refreshCompleted(resetFooterState: true);
  }

  Future<void> onLoading() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));

    /// if failed, use loadFailed(), if no data return, use LoadNodata()
    if (pageList.length > 15) {
      return refreshController.loadNoData();
    }
    setState(() {
      /// 添加数据
      pageList.add(MessageInteractModel(
          avatar:
              'https://img1.baidu.com/it/u=2179985785,1205130568&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          nickname: '果汁分你一半',
          timeStr: '刚才',
          tip: '评论了你',
          info: '故宫果然十分庄严，太震撼了',
          content: '[我的评论] 北京故宫坐落在北京中轴线的中间，是世界上最大的木结构宫殿，也…'));
    });

    /// 完毕
    refreshController.loadComplete();
  }

  ListView listViewBuilder(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 10.w),
      itemBuilder: (context, index) {
        var row = pageList[index];
        return Container(
          margin: EdgeInsets.only(top: 15.h),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CircleAvatar(
                radius: 20.w,
                backgroundImage: NetworkImage(row.avatar),
              ),
              Expanded(
                  child: Container(
                padding: EdgeInsets.only(left: 15.w),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: EdgeInsets.only(bottom: 8.w),
                      child: Text(
                        row.nickname,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color0000, fontWeight: FontWeight.w700),
                      ),
                    ),
                    Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(bottom: 10.w),
                        child: Text(
                          '${row.timeStr}  ${row.tip}',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: 12.sp),
                        )),
                    if (row.info != null)
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(bottom: 15.w),
                        child: Text(
                          '${row.info}',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000, fontSize: 16.sp),
                        ),
                      ),
                    Container(
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          spacing: 8.w,
                          children: [
                            ...row.imgs.map((url) => Image.network(
                                  url,
                                  width: 45.w,
                                  height: 45.w,
                                )),
                            Text(
                              row.content,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6666, fontSize: 15.sp, lineHeight: 1.2.h),
                            )
                          ],
                        ))
                  ],
                ),
              ))
            ],
          ),
        );
      },
      itemCount: pageList.length,
    );
  }
}

class InteractLike extends StatefulWidget {
  const InteractLike({super.key});

  @override
  State<InteractLike> createState() => _InteractLikeState();
}

class _InteractLikeState extends State<InteractLike> {
  RefreshController refreshController = RefreshController();

  List<MessageInteractModel> pageList = [];

  @override
  void initState() {
    pageList.add(MessageInteractModel(
        avatar:
            'https://img1.baidu.com/it/u=2179985785,1205130568&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '果汁分你一半',
        timeStr: '刚才',
        tip: '评论了你',
        info: '故宫果然十分庄严，太震撼了',
        content: '[我的评论] 北京故宫坐落在北京中轴线的中间，是世界上最大的木结构宫殿，也…'));
    pageList.add(MessageInteractModel(
        avatar:
            'https://img1.baidu.com/it/u=2090606195,1473750087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '飞来飞去',
        timeStr: '6分钟前',
        tip: '点赞了你',
        content: '[我的评论] 金黄色的琉璃瓦下，是一排朱红的围墙，装点着它…',
        imgs: [
          'https://img2.baidu.com/it/u=1984321682,2389589006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          'https://img2.baidu.com/it/u=2749440734,3290979349&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
        ]));
    pageList.add(MessageInteractModel(
        avatar:
            'https://img0.baidu.com/it/u=3979949991,2513156939&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        nickname: '王仙芝的鱼儿',
        timeStr: '6小时前',
        tip: '点赞了你',
        content: '北京十大拍照打卡地，梅思带你游个遍',
        imgs: [
          'https://img0.baidu.com/it/u=3684942262,1439353890&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
          'https://img1.baidu.com/it/u=2713442194,662785862&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
        ]));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return scrollRefreshConfig(context);
  }

  Widget scrollRefreshConfig(BuildContext context) {
    return ScrollRefreshConfig(
      refreshController: refreshController,
      onRefresh: onRefresh,
      onLoading: onLoading,
      child: listViewBuilder(context),
    );
  }

  Future<void> onRefresh() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));
    refreshController.refreshCompleted(resetFooterState: true);
  }

  Future<void> onLoading() async {
    /// 发起请求
    await Future.delayed(const Duration(milliseconds: 2000));

    /// if failed, use loadFailed(), if no data return, use LoadNodata()
    if (pageList.length > 15) {
      return refreshController.loadNoData();
    }
    setState(() {
      /// 添加数据
      pageList.add(MessageInteractModel(
          avatar:
              'https://img1.baidu.com/it/u=2179985785,1205130568&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          nickname: '果汁分你一半',
          timeStr: '刚才',
          tip: '评论了你',
          info: '故宫果然十分庄严，太震撼了',
          content: '[我的评论] 北京故宫坐落在北京中轴线的中间，是世界上最大的木结构宫殿，也…'));
    });

    /// 完毕
    refreshController.loadComplete();
  }

  ListView listViewBuilder(BuildContext context) {
    return ListView.builder(
      padding: EdgeInsets.symmetric(horizontal: 10.w),
      itemBuilder: (context, index) {
        var row = pageList[index];
        return Container(
          margin: EdgeInsets.only(top: 15.h),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              CircleAvatar(
                radius: 20.w,
                backgroundImage: NetworkImage(row.avatar),
              ),
              Expanded(
                  child: Container(
                padding: EdgeInsets.only(left: 15.w),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: EdgeInsets.only(bottom: 8.w),
                      child: Text(
                        row.nickname,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color0000, fontWeight: FontWeight.w700),
                      ),
                    ),
                    Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(bottom: 10.w),
                        child: Text(
                          '${row.timeStr}  ${row.tip}',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: 12.sp),
                        )),
                    if (row.info != null)
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(bottom: 15.w),
                        child: Text(
                          '${row.info}',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color0000, fontSize: 16.sp),
                        ),
                      ),
                    Container(
                        alignment: Alignment.centerLeft,
                        child: Wrap(
                          spacing: 8.w,
                          children: [
                            ...row.imgs.map((url) => Image.network(
                                  url,
                                  width: 45.w,
                                  height: 45.w,
                                )),
                            Text(
                              row.content,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6666, fontSize: 15.sp, lineHeight: 1.2.h),
                            )
                          ],
                        ))
                  ],
                ),
              ))
            ],
          ),
        );
      },
      itemCount: pageList.length,
    );
  }
}
